import { type FC } from 'react';
import { CHAT_DETAIL_TYPE } from '@/request';
import iconUser from '@/assets/imgs/icon-user.png';
import iconGpt from '@/assets/imgs/icon-gpt.png';
import { MarkDown } from './markdown';

const MessageBlock: FC<{ item: CHAT_DETAIL_TYPE['messages'][number] }> = (
  props,
) => {
  const { item } = props;
  if (item.role === 'user') {
    return (
      <div className='flex justify-between pl-[22px] pr-[22px] mb-[19px] text-black1'>
        <div className='grow shrink basis-1 text-right'>
          <div className='text-[14px] mb-[5px]'>你</div>
          <div className='text-[14px] text-[#666] bg-[#ECF6FF] pt-[8px] pl-[11px] pr-[11px] pb-[8px] w-[fit-content] ml-[auto] rounded-l-[8px] rounded-br-[8px]'>
            {item.content}
          </div>
        </div>
        <img className='w-[38px] h-[38px] ml-[14px]' src={iconUser} alt='' />
      </div>
    );
  } else if (item.role === 'assistant') {
    return (
      <div className='flex justify-between pl-[22px] pr-[22px] mb-[19px] text-black1'>
        <img className='w-[38px] h-[38px] mr-[14px] ' src={iconGpt} alt='' />
        <div className='grow shrink basis-1'>
          <div className='text-[14px] mb-[5px]'>老师</div>
          <div className='text-[14px] text-[#666] bg-[#F2F2F2] pt-[8px] pl-[11px] pr-[11px] pb-[8px] w-[fit-content] mr-[auto] rounded-r-[8px] rounded-bl-[8px]'>
            <MarkDown markdown={item.content} />
          </div>
        </div>
      </div>
    );
  }
};

export default MessageBlock;
